<template>
  <view class="login-container">
    <view class="login-box">
      <!-- 图标 -->
      <uni-icons type="contact-filled" color="gray" size="100"></uni-icons>
      <!-- 登录按钮 -->
      <button type="primary" open-type="getUserInfo" @click="getUserProfile" class="login-btn">一键登录</button>
      <!-- 提示文字 -->
      <view class="text">登录享受更多权益</view>
    </view>
  </view>
</template>

<script>
// 从vuex中按需导入辅助函数
import { mapMutations, mapState } from 'vuex';
export default {
  data() {
    return {};
  },
  computed: {
    ...mapState('user', ['redirectInfo'])
  },
  methods: {
    ...mapMutations('user', ['updateUserInfo', 'updateToken', 'updateRedirectInfo']),
    // 获取用户信息
    getUserProfile() {
      // console.log(e)
      uni.getUserProfile({
        desc: '登录',
        success: res => {
          // 将信息存到 vuex 中
          this.updateUserInfo(res.userInfo);
          this.getToken(res);
        },
        fail: res => {
          return uni.$showMsg('您取消了登录授权');
        }
      });
    },
    // 获取token
    async getToken(info) {
      console.log(info);
      // 调用微信 login 接口 获取 code
      const [err, res] = await uni.login().catch(err => err);
      if (err || res.errMsg !== 'login:ok') return uni.$showMsg('登陆失败!');

      // 假token
      this.updateToken('Bearer 5067D805D98456393A1C5DFE849B883B');
      // 判断 vuex 中的 redirectInfo 是否为 null
      // 如果不为 null，则登录成功之后，需要重新导航到对应的页面
      this.navigateBack();
      // console.log(res)
      // 创建请求参数对象
      // const query = {
      //   code: res.code,
      //   encryptedData: info.encryptedData,
      //   iv: info.iv,
      //   rawData: info.rawData,
      //   signature: info.signature
      // };
      // console.log(query);
      // 发起请求
      // const { data: result } = await uni.$http.post('api/public/v1/users/wxlogin', query);
      // if (result.meta.status !== 200) return uni.$showMsg('登录失败!');
      // console.log(result);
    },
    navigateBack() {
      // redirectInfo 不为 null，并且导航方式为 switchTab
      if (this.redirectInfo && this.redirectInfo.openType === 'switchTab') {
        // 调用小程序提供的 uni.switchTab() API 进行页面的导航
        uni.switchTab({
          url: this.redirectInfo.from,
          // 导航成功之后，把 vuex 中的 redirectInfo 对象重置为 null
          complete:() => {
            this.updateRedirectInfo(null)
          }
        })
      } 
    }
  }
};
</script>

<style lang="scss">
.login-container {
  .login-box {
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 750rpx;
    background-color: #efefef;
    &::after {
      position: absolute;
      bottom: 0;
      left: 0;
      content: '';
      width: 100%;
      height: 40px;
      background-color: #fff;
      border-radius: 50%;
      transform: translateY(50%);
    }
    .login-btn {
      width: 90%;
      height: 45px;
      margin: 15px 0;
      border-radius: 45px;
      background-color: #ff3f34;
    }
    .text {
      font-size: 12px;
      color: gray;
    }
  }
}
</style>
